<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试</title>
		<style type="text/css">
			div {
				width: 400px;
				border: 1px solid royalblue;
				margin: 20px 20px;
				padding: 10px 10px;
			}
			
			button {
				width: 80px;
			}
			
			.remove {
				text-align: center;
				color: red;
				font-weight: 100;
			}
		</style>
		<link rel="stylesheet" href="css/jquery-ui.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/nojs.js"></script>
		<script type="text/javascript">
			
			var $buttonTemp = $('<button class="ui-button"></button>')
			
			var $remove = $('<span class="glyphicon glyphicon-remove"></span>');
			$(function() {
				/*初始化页面 start*/
				var $resource = $(".resource");
				var $target = $(".target");
				var resourceButton = [{
					"id": 1,
					"name": "军事"
				}, {
					"id": 2,
					"name": "社会"
				}, {
					"id": 3,
					"name": "房产"
				}, {
					"id": 4,
					"name": "评论"
				}, {
					"id": 5,
					"name": "科技"
				}, {
					"id": 6,
					"name": "订阅"
				}];
				var targetButton = [{
					"id": 11,
					"name": "汽车"
				}, {
					"id": 12,
					"name": "体育"
				}, {
					"id": 13,
					"name": "财经"
				}, {
					"id": 14,
					"name": "国际"
				}, {
					"id": 15,
					"name": "娱乐"
				}, {
					"id": 16,
					"name": "养生"
				}];
				$.each(resourceButton, function(i, but) {
					var $temp = $buttonTemp.clone();
					$temp.data("id", but.id).text(but.name);
					$resource.append($temp);
				});
				$.each(targetButton, function(i, but) {
					var $temp = $buttonTemp.clone();
					$temp.data("id", but.id).text(but.name);
					$target.append($temp);
				});
				/*初始化页面 end*/
				
				
				var addJson = {};//保存从下面添加到上面的标签
				var remoevJson = {};//保存从上面删除到下面的标签
				
				/*  开始绑定事件  */
				//点击编辑按钮的事件
				$("button.editor").on("click", function() {
					var $editorButton = $(this);
					if ($editorButton.hasClass("done")) {//完成编辑之后的操作
						$editorButton.removeClass("done")
						$editorButton.text('编辑');
						$("button", $resource).each(function() {//删除标签中的X符号
							var  $canEditorButton =  $(this).removeClass("can");
							$("span", $canEditorButton).remove();
						});
						
						// 完成编辑统计此次操作的结果：
						console.log("从下面添加到上面的标签 addJson：" + JSON.stringify(addJson));
						console.log("从上面删除到下面的标签 remoevJson：" + JSON.stringify(remoevJson));
						var lastAllButtonArr = new Array();
						$("button",$resource).each(function(){
							lastAllButtonArr.push($(this).text());
						});
						console.info(lastAllButtonArr.join(","));
					} else {//开始编辑操作
						$editorButton.addClass("done");//表示当前页面处于编辑状态
						$("button", $resource).each(function() {
							$editorButton.text('保存');
							$(this).addClass("can").append($remove.clone());//给标签加一个X符号
						});
					}
				});
				//绑定点击含有can  能删除的按钮的事件
				$resource.on("click", "button.can", function() {
					var $button = $(this);
					$("span", $button).remove();
					$target.append($(this).removeClass("can"));
					//把删除的标签加入 remoevJson
					var id = $button.data("id");
					
					//如果此标签在 addJson 说明这个标签是从下面添加上来来的 则应从 addJson 中删除 并且本次不操作 remoevJson
					if(addJson[id]){
						delete addJson[id];
					}else{
						remoevJson[id] = $button.text();
					}
				});
				
				
				//绑定target  DIV里面的标签的点击事件
				$target.on("click", "button", function(){
					var $button = $(this);
					//判断当前按钮所处的状态
					if($("button.editor").hasClass("done")){
						$button.addClass("can").append($remove.clone());//给标签加一个X符号
					}
					$resource.append($button);
					//把新增的标签加入 addJson
					var id = $button.data("id");
					//如果此标签在 remoevJson中  说明这个标签是从上面删除下来的 则从 remoevJson 中删除， 且本次不操作 addJson
					if(remoevJson[id]){
						delete remoevJson[id];
					}else {
						addJson[id] = $button.text();
					}
					
				});
			});
		</script>
	</head>

	<body>
		<button class="ui-button editor" style="margin-left: 20px;">编辑</button>
		<div class="resource">
		</div>
		<hr />
		<div class="target">

		</div>

	</body>

</html>